<template>
  <div
    class="ConTextMenu"
    :style="{left: bodyleft + 'px',top: bodytop + 'px'  }"
    v-show="isdiv"
    @contextmenu.prevent
  >
    <div
      class="ctm-item cursor-p"
      v-for="(item,index) in listi"
      :key="index"
      :class="{'ctm-item-paddl':item.icon === '','ctm-item-separate': index == 3 || index == 5}"
      @click="ctmClick(index)"
    >
      <i
        class="ctm-item-icon"
        :class="item.icon"
      ></i>
      <span class="ctm-item-text">{{item.text}}</span>
    </div>

  </div>
</template>

<script>
export default {
  name: 'ConTextMenu',
  props: {
    pleft: Number,
    ptop: Number,
    ischeckBoxList: [String, Number],
    prindex: [String, Number],
    prchckxList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  watch: {
    ptop(newValue, oldValue) {
      this.isdiv = true
      // 处理点击的位置不能展示完全的问题
      let top = newValue
      let left = this.pleft
      const { clientWidth, clientHeight } = document.body
      if (clientHeight - newValue < 226) {
        top = newValue - 226
      }
      if (clientWidth - left < 136) {
        left = left - 136
      }
      this.bodytop = top
      this.bodyleft = left
      // document.addEventListener('click', this.hideView)
    },
  },
  // created () {
  //   document.addEventListener('click',this.hideView)
  // },
  data() {
    return {
      isdiv: false,
      bodytop: 0,
      bodyleft: 0,
      listi: [
        {
          icon: '',
          text: '打开',
        },
        {
          icon: 'el-icon-download',
          text: '下载',
        },
        {
          icon: 'el-icon-share',
          text: '分享',
        },
        {
          icon: 'el-icon-document',
          text: '重命名',
        },
        {
          icon: 'el-icon-rank',
          text: '移动',
        },
        {
          icon: 'el-icon-delete',
          text: '删除',
        },
        {
          icon: 'el-icon-close',
          text: '关闭',
        },
      ],
    }
  },
  methods: {
    ctmClick(index) {
      // 右键菜单关闭
      const objfun = {
        0: this.dakai,
        1: this.xiazai,
        2: this.fenxiang,
        3: this.chongmingming,
        4: this.yidong,
        5: this.del,
        6: this.guanbi,
      }
      objfun[index]()

      if (index != 6) {
        this.hideView()
      }
    },
    hideView() {
      this.isdiv = !this.isdiv
    },
    dakai() {
      this.$emit('dakaiEmit', this.prindex)
    },
    xiazai() {
      this.$emit('xiazai', this.prindex)
    },
    fenxiang() {
      this.$emit('fenXiangEmit', this.prindex)
    },
    chongmingming() {
      this.$emit('rename', this.prindex)
    },
    yidong() {
      this.$emit('yidong', this.prindex)
    },
    del() {
      this.$emit('updel')
    },
    guanbi() {
      this.$emit('indexhide', this.prindex)
      this.hideView()
    },
  },
  destroyed() {
    // document.removeEventListener('click', this.hideView, true)
  },
}
</script>

<style lang="scss" scoped>
.ConTextMenu {
  position: fixed;
  z-index: 9999;
  padding: 6px 0;
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
  box-shadow: 0 1px 6px rgb(0 0 0 / 20%);

  .ctm-item {
    min-width: 100px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #03081a;
    padding-left: 23px;
    position: relative;
    vertical-align: middle;

    .ctm-item-icon {
      font-size: 14px;
      font-weight: 700;
    }

    .ctm-item-text {
      line-height: 30px;
      font-size: 12px;
      color: #03081a;
      margin-left: 7px;
      display: inline-block;
    }
  }

  .ctm-item:hover {
    background-color: #f5f6fa;
  }

  .ctm-item-paddl {
    padding-left: 36px;
  }

  .ctm-item-separate {
    padding-bottom: 1px;
    border-bottom: 1px solid #f5f6fa;
  }
}
</style>